<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>个人画像</title>
  <!-- 引入bootstrap的css文件 -->
  <link rel="stylesheet" href="css\bootstrap-4.4.1-dist\css\bootstrap.min.css">
  <!-- 引入字体文件 -->
  <link rel="stylesheet" href="css/iconfont1.css">
  <link rel="stylesheet" href="css/iconfont2.css">
  <!-- 引入自定义css文件 -->
  <script>document.write('<link rel="stylesheet" href="css/main.css?time=' + new Date().getTime() + '">');</script>
  <link rel="shortcut icon" href="favicon.png">

</head>

<body class="no-margin-h bg09">
  <div class="container-fluid fill-h no-margin-h">
    <div class="row fill-h">
      <!-- 第一列 -->
      <div class="col-lg-4 fill-h no-margin-h no-padding bg08">
        <div class="container-fluid h-100">
          <!-- 标题 -->
          <div class="row h-title">
            <div class="col-12">
              <div class="contain-fluid h-100">
                <!-- 姓名标题 -->
                <div class="d-flex row h-50" style="display:none !important;" id="title_name">
                  <div class="col-7 d-flex  justify-content-center align-items-end">
                    <h1 class="no-margin-h d-inline-block" id="title_name_h1"></h1>

                    <span class="iconfont icon-htmal5icon25 font-big1_5 ml-4" id="title_name_search"
                      style="cursor:pointer;"></span>
                  </div>
                  <div class="col-5  d-flex justify-content-around align-items-end">
                    <a class="" href="personal_bigscreen.html" id="a_personal" style="color: white">个人画像</a>
                    <a class="text-muted" href="group_bigscreen.html" id='a_group'>群体画像</a>
                  </div>
                </div>
                <!-- 搜索框 -->
                <div class="row h-50 px-2 d-flex justify-content-center align-items-center" id="search_div"
                  style="display:none !important;">
                  <div class="input-group mb-0">
                    <input type="text" class="form-control" placeholder="输入编号（0-1999）或姓名搜索"
                      aria-label="Recipient's username" aria-describedby="basic-addon2" id="search_input">
                    <div class="input-group-append" id="search_button" style="cursor:pointer;">
                      <span class="iconfont icon-htmal5icon25 input-group-text rounded-right"></span>
                    </div>
                    <div class=" border border-white" id="search_list"
                      style="min-width:100%;display:none;position: absolute;left: 0px;top: 50px;z-index: 2000; overflow-y:auto; max-height: 500%;">
                      <ul class="list-group list-group-flush text-dark" id="search_ul" style="cursor:default;">
                      </ul>
                    </div>
                  </div>
                </div>
                <!-- 基本信息标题 -->
                <div class="d-flex row h-50" style="display:none !important;" id="title_info">
                  <div class="col-12 d-flex justify-content-center align-items-center">
                    <span id="title_info_sex"></span>
                    <span>&nbsp;</span>
                    <span id="title_info_age"></span>
                    <span>&nbsp;</span>
                    <span id="title_info_nation"></span>
                    <span>&nbsp;</span>
                    <span id="title_info_job"></span>
                    <span>&nbsp;</span>
                    <span id="title_info_address"></span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 流程图 -->
          <div class="row h-process px-2 ">
            <div class="col-12 h-100 no-padding">
              <div class="container-fluid h-100" id="process_con"></div>

            </div>
          </div>
        </div>
      </div>
      <!-- 第二列 -->
      <div class="col-lg-4 fill-h no-margin-h bg08">
        <div class="container-fluid h-100 no-padding">
          <!-- 第一行：总体健康指数 -->
          <div class="row h-20" style="display:none;" id="total_health_con">
            <div class="col-4 no-padding justify-content-end d-flex align-items-center">
              <span class="iconfont icon-renti font-big5 text-success no-padding"></span>
            </div>
            <div class="col-8 h-100">
              <div class="row h-60 no-padding">
                <div class="col-12 justify-content-start d-flex align-items-end pl-2">
                  <span class="font-big2_5 font-weight-bold text-success no-padding" id='total_health_index'></span>
                </div>
              </div>
              <div class="row h-40 no-padding">
                <div class="col-12 justify-content-start d-flex align-items-start pl-2">
                  <span class="font-big1_5 text-muted">总体健康指数</span>
                </div>
              </div>
            </div>
          </div>
          <!-- 第二行，各部位评分 -->
          <div class="row" id='categories_div' style='display:none;'>
            <!-- 类别1 心脑血管 -->
            <div id="category1" class="col-2 h-100 px-2 py-2" style="cursor:default;">
              <div class="border-success border border-bottom-0 rounded-top d-flex justify-content-center"
                id='category1_icon'></div>
              <div class="border-left border-right border-success fs8 d-flex justify-content-center"
                id='category1_text'></div>
              <div
                class="border-top-0 border border-success rounded-bottom fs8 d-flex justify-content-center bg-primary text-white"
                id='category1_score'></div>
            </div>
            <!-- 类别2 心脏 -->
            <div id="category2" class="col-2 h-100 px-2 py-2" style="cursor:default;">
              <div class="border-success border border-bottom-0 rounded-top d-flex justify-content-center"
                id='category2_icon'></div>
              <div class="border-left border-right border-success fs8 d-flex justify-content-center"
                id='category2_text'></div>
              <div
                class="border-top-0 border border-success rounded-bottom fs8 d-flex justify-content-center bg-primary text-white"
                id='category2_score'></div>
            </div>
            <!-- 类别3 大脑 -->
            <div id="category3" class="col-2 h-100 px-2 py-2" style="cursor:default;">
              <div class="border-success border border-bottom-0 rounded-top d-flex justify-content-center"
                id='category3_icon'>
              </div>
              <div class="border-left border-right border-success fs8 d-flex justify-content-center"
                id='category3_text'>

              </div>
              <div
                class="border-top-0 border border-success rounded-bottom fs8 d-flex justify-content-center bg-primary text-white"
                id='category3_score'>

              </div>
            </div>
            <!-- 类别4 代谢 -->
            <div id="category4" class="col-2 h-100 px-2 py-2" style="cursor:default;">
              <div class="border-success border border-bottom-0 rounded-top d-flex justify-content-center"
                id='category4_icon'>

              </div>
              <div class="border-left border-right border-success fs2 d-flex justify-content-center"
                id='category4_text'>

              </div>
              <div
                class="border-top-0 border border-success rounded-bottom fs8 d-flex justify-content-center bg-primary text-white"
                id='category4_score'>

              </div>
            </div>
            <!-- 类别5 肾-->
            <div id="category5" class="col-2 h-100 px-2 py-2" style="cursor:default;">
              <div class="border-success border border-bottom-0 rounded-top d-flex justify-content-center"
                id='category5_icon'>

              </div>
              <div class="border-left border-right border-success fs8 d-flex justify-content-center"
                id='category5_text'>

              </div>
              <div
                class="border-top-0 border border-success rounded-bottom fs8 d-flex justify-content-center bg-primary text-white"
                id='category5_score'>

              </div>
            </div>
            <!-- 类别6 血压-->
            <div id="category6" class="col-2 h-100 px-2 py-2" style="cursor:default;">
              <div class="border-success border border-bottom-0 rounded-top d-flex justify-content-center"
                id='category6_icon'>

              </div>
              <div class="border-left border-right border-success fs8 d-flex justify-content-center"
                id='category6_text'>

              </div>
              <div
                class="border-top-0 border border-success rounded-bottom fs8 d-flex justify-content-center bg-primary text-white"
                id='category6_score'>

              </div>
            </div>
          </div>
          <!-- 第三行，相关指标 -->
          <div id="category_items" class="row mt-1 border border-warning rounded" style="display: none;">
            <div class="col-12 text-white font-weight-bold h-100">
              <table class="table table-sm no-margin-h">
                <thead>
                  <tr>
                    <th scope="col" class="text-nowrap border-top-0 text-white">#</th>
                    <th scope="col" class="text-nowrap border-top-0 text-white">名称</th>
                    <th scope="col" class="text-nowrap border-top-0 text-white" style="text-align:center">当前指标</th>
                    <th scope="col" class="text-nowrap border-top-0 text-white" style="text-align:center">理想指标</th>
                  </tr>
                </thead>
                <tbody id="items_tbody">
                </tbody>
              </table>

            </div>
          </div>

        </div>
      </div>
      <!-- 第三列 -->
      <div class="col-lg-4 fill-h no-margin-h bg08">
        <div class="container-fluid h-100">
          <div class="row h-10 d-none d-lg-block">
            <div class="col-12 pr-2 pb-3 d-flex justify-content-end align-items-center" id="now_time"></div>
          </div>
          <div class="row h-30 pb-2" id="illness1_row">
            <!-- 第一个疾病风险预测 -->
            <div id="illness1" class="col-11 w-100 h-100 no-padding d-flex justify-content-center align-items-center">
            </div>
            <div class="col-1 d-flex justify-content-center align-items-center no-padding">
              <span id="illness1_down" class="text-primary iconfont icon-shang1"
                style="display:none;cursor:pointer;text-shadow: 0 0 0.2em #007BFF,0 0 0.2em #007BFF;"></span>
              <br>
              <span id="illness1_up" class="text-primary iconfont icon-shang"
                style="display:none;cursor:pointer;text-shadow: 0 0 0.2em #007BFF,0 0 0.2em #007BFF;"></span>
            </div>
          </div>
          <div class="row h-30 pb-2" id="illness2_row">
            <!-- 第二个疾病风险预测 -->
            <div id="illness2" class="col-11 w-100 h-100 no-padding d-flex justify-content-center align-items-center">
            </div>
            <div class="col-1 d-flex justify-content-center align-items-center no-padding">
              <span id="illness2_down" class="text-primary iconfont icon-shang1"
                style="display:none;cursor:pointer;text-shadow: 0 0 0.2em #007BFF,0 0 0.2em #007BFF;"></span>
              <br>
              <span id="illness2_up" class="text-primary iconfont icon-shang"
                style="display:none;cursor:pointer;text-shadow: 0 0 0.2em #007BFF,0 0 0.2em #007BFF;"></span>
            </div>
          </div>
          <div class="row h-30 pb-2" id="illness3_row">
            <!-- 第三个疾病风险预测 -->
            <div id="illness3" class="col-11 w-100 h-100 no-padding d-flex justify-content-center align-items-center">
            </div>
            <div class="col-1 d-flex justify-content-center align-items-center no-padding">
              <span id="illness3_down" class="text-primary iconfont icon-shang1"
                style="display:none;cursor:pointer;text-shadow: 0 0 0.2em #007BFF,0 0 0.2em #007BFF;"></span>
              <br>
              <span id="illness3_up" class="text-primary iconfont icon-shang"
                style="display:none;cursor:pointer;text-shadow: 0 0 0.2em #007BFF,0 0 0.2em #007BFF;"></span>
            </div>
          </div>
          <div id="illness_message" class="row h-60" style="display:none;">
            <div class="col-12 h-100">
              <div class="row">
                <div class="col-11 bg-info text-white d-flex justify-content-start align-items-center py-1">主要危险因素</div>
              </div>
              <div class="row">
                <div class="col-11 text-white" id="illness_items">
                  主要危险因素是血糖过低血压过高
                </div>
              </div>
              <div class="row">
                <div class="col-11 bg-info text-white d-flex justify-content-start align-items-center py-1">健康指南</div>
              </div>
              <div class="row">
                <div class="col-11 text-white" id="illness_suggestion">
                  多运动
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <button id="zhuyi_pop" type="button" class="btn btn-sm zhuyi_pop" data-toggle="popover" data-placement="right"
    title="" data-content="本系统仅用于演示健康画像数据的展示，系统中使用的数据都是随机生成的！">
    <span class="text-warning iconfont icon-jinggao font-big1_5"></span>
  </button>



  <!-- 引入jQuery文件 -->
  <script src="js/jquery.min.js"></script>
  <!-- 引入bootstrap的js文件 -->
  <script src="css\bootstrap-4.4.1-dist\js\popper.min.js"></script>
  <script src="css\bootstrap-4.4.1-dist\js\bootstrap.min.js"></script>

  <!-- 引入echarts文件///////////////////////////////////////////////////////////////////////////////////////// -->
  <script type="text/javascript" src="js/echarts.min.js"></script>
  <!-- 引入自定义js文件 -->
  <script src='data/data_person.js'></script>
  <script src='data/data_part.js'></script>
  <script src='data/data_item.js'></script>
  <script>document.write('<script src="js/personal.js?time=' + new Date().getTime() + '"><\/script>');</script>


  <script>

  </script>

</body>

</html>